import React, { useState } from 'react';
import {
  Box,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  TextField,
  Typography,
  Paper,
  Divider,
} from '@mui/material';

export default function HttpSettings({ settings, onSettingsChange }) {
  const handleChange = async (event) => {
    const { name, value } = event.target;
    const newSettings = {
      ...settings,
      [name]: value,
    };
    onSettingsChange(newSettings);
  };

  return (
    <Box sx={{ height: 'calc(100vh - 64px)', overflow: 'auto' }}>
      <Box sx={{ p: 3, maxWidth: 800, margin: '0 auto' }}>
        <Paper sx={{ p: 3 }}>
          <Typography variant="h6" gutterBottom>
            HTTP 设置
          </Typography>

          <FormControl fullWidth margin="normal">
            <InputLabel>证书认证</InputLabel>
            <Select
              name="check-certificate"
              value={settings['check-certificate'] || '是'}
              label="证书认证"
              onChange={handleChange}
            >
              <MenuItem value="是">是</MenuItem>
              <MenuItem value="否">否</MenuItem>
            </Select>
          </FormControl>

          <FormControl fullWidth margin="normal">
            <InputLabel>支持 GZIP</InputLabel>
            <Select
              name="http-accept-gzip"
              value={settings['http-accept-gzip'] || '是'}
              label="支持 GZIP"
              onChange={handleChange}
            >
              <MenuItem value="是">是</MenuItem>
              <MenuItem value="否">否</MenuItem>
            </Select>
          </FormControl>

          <FormControl fullWidth margin="normal">
            <InputLabel>认证挑战</InputLabel>
            <Select
              name="http-auth-challenge"
              value={settings['http-auth-challenge'] || '是'}
              label="认证挑战"
              onChange={handleChange}
            >
              <MenuItem value="是">是</MenuItem>
              <MenuItem value="否">否</MenuItem>
            </Select>
          </FormControl>

          <FormControl fullWidth margin="normal">
            <InputLabel>启用HTTP管线化</InputLabel>
            <Select
              name="http-pipelining"
              value={settings['http-pipelining'] || '否'}
              label="启用HTTP管线化"
              onChange={handleChange}
            >
              <MenuItem value="是">是</MenuItem>
              <MenuItem value="否">否</MenuItem>
            </Select>
          </FormControl>

          <TextField
            fullWidth
            margin="normal"
            label="自定义 User Agent"
            name="user-agent"
            value={settings['user-agent'] || ''}
            onChange={handleChange}
            placeholder="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
          />

          <TextField
            fullWidth
            margin="normal"
            label="自定义请求头"
            name="custom-headers"
            value={settings['custom-headers'] || ''}
            onChange={handleChange}
            multiline
            rows={4}
            placeholder="每行一个请求头，格式：Header: Value"
          />
          

          <Divider sx={{ my: 3 }} />

          <Typography variant="subtitle1" gutterBottom>
            HTTP代理设置
          </Typography>

          <TextField
            fullWidth
            margin="normal"
            label="HTTP 账号用户名"
            name="http-proxy-user"
            value={settings['http-proxy-user'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTP 账号密码"
            name="http-proxy-passwd"
            type="password"
            value={settings['http-proxy-passwd'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTP 代理服务器"
            name="http-proxy"
            value={settings['http-proxy'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTP 代理服务器用户名"
            name="http-proxy-user"
            value={settings['http-proxy-user'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTP 代理服务器密码"
            name="http-proxy-passwd"
            type="password"
            value={settings['http-proxy-passwd'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTPS 代理服务器"
            name="https-proxy"
            value={settings['https-proxy'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTPS 代理服务器用户名"
            name="https-proxy-user"
            value={settings['https-proxy-user'] || ''}
            onChange={handleChange}
          />

          <TextField
            fullWidth
            margin="normal"
            label="HTTPS 代理服务器密码"
            name="https-proxy-passwd"
            type="password"
            value={settings['https-proxy-passwd'] || ''}
            onChange={handleChange}
          />
        </Paper>
      </Box>
    </Box>
  );
}